<style lang="scss" scoped>
::v-deep .radio1 .el-radio {
  width: 50px;
  margin-left: 0;
  line-height: 24px;
}
</style>
<template>
    <div style="padding-left:80px">
        <el-form
            :model="queryForm"
            label-width="130px"
            :rules="rules"
            ref="viewform"
            label-suffix="："
        >
            <el-row :getter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('题库名称')" prop="questionPoolName">
                        <el-input
                            disabled
                            v-model="queryForm.questionPoolName"
                            maxlength="32"
                            :placeholder="$t('请输入')"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('试题代码')" prop="questionCode">
                        <el-input
                            disabled
                            v-model="queryForm.questionCode"
                            maxlength="32"
                            :placeholder="$t('请输入')"
                        ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('题目类型')" prop="questionType">
                        <el-select disabled v-model="queryForm.questionType" style="width: 100%">
                            <el-option :label="$t('单选题')" :value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="24">
                <el-col :span="24">
                    <el-form-item :label="$t('试题名称')" prop="questionName">
                        <el-input
                            disabled
                            v-model.trim="queryForm.questionName"
                            :placeholder="$t('请输入')"
                            show-word-limit
                            :maxlength="32"
                            type="textarea"
                            clearable
                        ></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="24">
                <el-col :span="24">
                    <el-form-item label="选项设置">
                        <span>参考答案：</span>
                        <el-radio-group class="radio1" v-model="queryForm.answer">
                            <el-radio
                                :label="item.label"
                                v-for="item in radios"
                                v-show="item.status"
                                disabled
                                :key="item.key"
                            >
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :getter="24">
                <el-col :span="12">
                    <el-form-item
                        disabled
                        v-for="(domain, index) in queryForm.answerList"
                        :label="domain.label"
                        :key="domain.key"
                        :prop="'answerList.' + index + '.value'"
                    >
                        <!-- <el-col :span="20"> -->
                        <el-input disabled v-model="domain.value"></el-input>
                        <!-- </el-col> -->
                        <!-- <el-button @click.prevent="removeDomain()" v-show="domain.status">
                            删除
                        </el-button> -->
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            width="25%"
            ref="innerDialog"
            :title="$t('graduateBase.prompt')"
            :visible.sync="innerVisible"
            append-to-body
            :top="'28vh'"
        >
            <div style="text-align: left;margin-bottom: 25px;">
                {{ $t('graduateBase.cancelTip') }}
            </div>
            <div style="text-align: right;">
                <el-button type="primary" @click="confirmInner">
                    {{ $t('common.btn.confirm') }}
                </el-button>
                <el-button @click="cancelInner">{{ $t('common.btn.cancel') }}</el-button>
                <el-button type="primary" @click="confirmAndClose">
                    {{ $t('graduateBase.saveAndClose') }}
                </el-button>
            </div>
        </el-dialog>
        <el-row type="flex" class="row-bg" justify="end">
            <el-button @click="cancelDialog">{{ $t('返回') }}</el-button>
            <!-- <el-button type="primary" @click="conserve">{{ $t('collegeSwitch.save') }}</el-button> -->
        </el-row>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import interAcaConference from 'common/src/api/internationalCommunication/interAcaConference'

export default {
    props: {
        dataList: {
            type: String
        },
        dataProp: {
            type: String
        },
        dataListProp: {
            type: Object
        },
        dataQueryForm: {
            type: Object
        },
        dataQuery: {
            type: Object
        },
        showFlag: {
            type: Boolean
        },
        agent: {
            type: Boolean,
            default: false,
            required: false
        },
        admin: {
            type: Boolean,
            default: false,
            required: false
        }
    },
    data() {
        return {
            list: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O'],
            radios: [
                { label: 'A', key: '0', status: true },
                { label: 'B', key: '1', status: true },
                { label: 'C', key: '2', status: true },
                { label: 'D', key: '3', status: true }
            ],
            queryForm: {
                questionPoolId: this.dataQuery.questionPoolId,
                questionCode: '',
                questionType: 1,
                questionPoolName: this.dataQuery.questionPoolName,
                answer: '',
                answerList: [
                    {
                        label: 'A',
                        key: '0',
                        status: false
                    },
                    {
                        label: 'B',
                        key: '1',
                        status: false
                    },
                    {
                        label: 'C',
                        key: '2',
                        status: false
                    },
                    {
                        label: 'D',
                        key: '3',
                        status: false
                    }
                ]
            },
            radio: 1,
            value: [],
            collegeId: [],
            dataList: [],
            dataLists: [],
            fileList: [],
            innerVisible: false,
            id: '',
            options: {
                faculty: [],
                timeList: [],
                title: [],
                typeId: [],
                childTypeId: []
            },
            rules: {}
        }
    },
    watch: {
        dataListProp: {
            handler: function(newV, oldV) {
                this.queryForm = this.dataListProp
                let list = []
                this.radios = []
                if (this.dataListProp.answerListVOList) {
                    this.queryForm.answerListVOList.forEach((el,index) => {
                        list.push({
                            label: el.optionCode,
                            value: el.optionContent
                        })

                        this.radios.push({
                          label: el.optionCode,
                          key: index,
                          status: true
                      })
                    })
                    this.queryForm.answerList = list
                }

            },
            deep: true,
            immediate: true
        }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
        // 内层弹出确定
        confirmInner() {
            this.dataListProp = {}
            this.listName = ''
            this.$refs['viewform'].resetFields()
            this.innerVisible = false
            this.$emit('cancel-dialog', false)
        },
        // 内层弹出取消
        cancelInner() {
            this.innerVisible = false
        },
        // 内层弹出保存关闭
        confirmAndClose() {
            this.innerVisible = false
            this.conserve()
        },
        // 取消
        cancelDialog() {
            this.$refs['viewform'].resetFields()
            this.$emit('cancel-view', false)
        },

        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 保存
        conserve() {
            this.$refs['viewform'].validate(valid => {
                if (valid) {
                    this.queryForm.id = this.dataListProp.id
                    this.$emit('affirm-edit', this.queryForm, this.dataList)
                }
            })
        }
    }
}
</script>
